<template>
  <div class="tabs-box">
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ check: selectedTab.id === tab.id }"
        @click="emit('changeTab', tab)"
      >
        {{ tab.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["tabs", "selectedTab"]);
const emit = defineEmits(["changeTab"]);
</script>

<style scoped lang="scss">
.tabs-box {
  box-sizing: border-box;
  margin: 0.35rem auto;

  .tabs {
    width: 100%;
    height: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--theme-color4);
    box-sizing: border-box;
    border-radius: 0.15rem;

    div {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      color: var(--theme-neutral2);
      font-weight: 100;
      font-size: 0.34rem;
      text-align: center;
      padding: 0 0.1rem;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;

      &:nth-child(1) {
        border-top-left-radius: 0.15rem;
        border-bottom-left-radius: 0.15rem;
      }

      &:nth-child(3) {
        border-top-right-radius: 0.15rem;
        border-bottom-right-radius: 0.15rem;
      }

      &.check {
        color: var(--theme-neutral1);
        background: var(--theme-color1);
      }
    }
  }
}
</style>
